<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <!-- css样式文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- js样式文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/template-web.js"></script>
    <!-- 页码条 组件 -->
    <script src="js/JZPagination.js"></script>

    <style>
        #pageDiv {
            font-size: 14px;

        }

        #pageDiv a,
        span {
            border: 1px solid #000;
            padding: 3px 10px;
            margin: 3px 2px;
            color: #000;
            background-color: whitesmoke;
            text-decoration: none;
        }

        #pageDiv a:hover {
            color: #fff;
            background-color: #0094ff;
        }

        #pageDiv select {
            margin: 5px;
        }

        #pageDiv a.active {
            color: #fff;
            background-color: #0094ff;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章列表
        </div>

        <div class="container-fluid common_con">
            <!-- 查询区 begin -->
            <div class="row opt_btns">
                <div class="col-xs-6">
                    <form id="f1" class="form-inline">
                        <!-- 文章分类 下拉框 -->
                        <select id="selCate" name="type" class="form-control input-sm">
                        </select>

                        <!-- 文章发布状态 下拉框 -->
                        <select id="selSta" name="state" class="form-control input-sm">
                            <option value="">所有状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已发布">已发布</option>
                        </select>

                        <input type="button" id="btnSearch" value="筛选" class="btn btn-default btn-sm" />
                    </form>
                </div>
                <div class="col-xs-6">
                    <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
                </div>
            </div>
            <!-- 查询区 end -->

            <!-- 数据表格 begin -->
            <table class="table table-striped table-bordered table-hover mp20">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody id="wztbody">
                    <!-- 远程加载数据 -->
                </tbody>
            </table>
            <!-- 数据表格 end -->

            <!-- 页码条容器 begin -->
            <div id="pageDiv" class="row text-center"></div>
            <!-- 页码条容器 end -->

        </div>
    </div>
    <!-- 表格行 模板引擎 begin -->
    <script id='trTepmlate' type="text/html">
        {{each data.data v}}
            <tr>
                <td>{{v.title}}</td>
                <td>{{v.author}}</td>
                <td>{{v.category}}</td>
                <td class="text-center">{{v.date}}</td>
                <td class="text-center">{{v.state}}</td>
                <td class="text-center">
                    <a href="./article_edit.html?id={{v.id}}" class="btn btn-default btn-xs">编辑</a>
                    <a href="javascript:void(0)" data-id="{{v.id}}" class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
        {{/each}}
        </script>
    <!-- 表格行 模板引擎 end -->

    <!-- 分类下拉框 模板引擎 begin -->
    <script id='optionTepmlate' type="text/html">
            <option value="">所有分类</option>
            {{each data v}}
               <option value="{{v.id}}">{{v.name}}</option>
            {{/each}}
            </script>
    <!-- 分类下拉框 模板引擎 end -->

    <script>
        // 页面 加载完资源后
        $(function () {
            // 1.生成 文章分类 下拉框
            loadArtCateList();
            // 2.加载 第一页 数据
            loadList(1);
        })

        //1.业务目标：加载 文章列表数据 (type - 文章分类id , state - 文章发布状态)
        //      pageIndex = 页码
        //      pageSize = 页容量
        function loadList(pageIndex = 1, pageSize = 15) {
            // 调用 服务器 查询接口时， 文章分类 和 发布状态 都从 全局变量中 获取
            $.ajax({
                url: 'http://localhost:8080/admin/article/query',
                method: 'get',
                data: 'perpage=' + pageSize + '&type=' + queryCateId + '&state=' + queryState + '&page=' + pageIndex,
                success: function (backData) {

                    if (backData.code == 200) {
                        // 调用模板引擎方法，遍历 数据中的 数组，根据 模板字符串 生成 n行 表格行 html代码
                        var strHtml = template('trTepmlate', backData);
                        // 将 生成的 Html 字符串 设置到 tbody 中
                        $('#wztbody').html(strHtml);

                        // 生成 页码条(点击页码调用的函数-调用时 会把 被点击的页码 传进去)
                        //      （方法对象 , 页码条容器id ， 当前页码 ， 页容量 ， 页码组容量 ， 总行数）
                        makePageBar(loadList, 'pageDiv', pageIndex, pageSize, 8, backData.data.totalCount);
                    }
                }
            });
        }


        //1.1 业务目标：加载文章分类 下拉框数据
        function loadArtCateList() {
            $.ajax({
                url: 'http://localhost:8080/admin/category/list',
                method: 'get',
                success: function (backData) {
                    if (backData.code == 200) {
                        // 调用模板引擎方法，遍历 数据中的 数组，根据 模板字符串 生成 n行 表格行 html代码
                        var strHtml = template('optionTepmlate', backData);
                        // 将 生成的 Html 字符串 设置到 文章类别下拉框 中
                        $('#selCate').html(strHtml);
                    }
                }
            });
        }

        // 全局变量：筛选文章的条件 --------
        var queryCateId = ""; // 分类 id  |
        var queryState = ""; // 发布状态  |
        // -------------------------------

        //2.业务目标：筛选 按钮 添加点击事件，实现数据 按照 分类 和 状态 筛选
        $('#btnSearch').click(function () {
            // 分别获取 两个下拉框的值
            queryCateId = $('#selCate').val(); // 分类id
            queryState = $('#selSta').val(); // 发布状态

            // 调用时，需要 传入 页码 1，查询条件 通过 全局变量 给了 loadList 方法中的 查询接口
            loadList(1);

        });

        // 3.删除文章数据
        // 3.1 为所有当前和未来的 删除按钮 添加点击事件
        $("#wztbody").on('click', '.btn-danger', function () {
            if (!confirm('你确定要删除吗？')) {
                return;
            }
            var $btnDel = $(this);
            var aId = this.dataset.id;
            $.ajax({
                url: 'http://localhost:8080/admin/article/delete',
                method: 'get',
                dataType: 'json',
                data: { id: aId },
                success: function (backData) {
                    if (backData.code == 204) {
                        alert(backData.msg);
                        // 删除按钮所在行
                        $btnDel.parents('tr').remove();
                    }
                },
            });
        });

        // 设置左侧菜单
        $('#release_btn').click(function () {
            window.parent.setMenu(1, 1);
        })
    </script>


</body>

</html>